<template>
  <div>
    <!-- 三级目录全局组件 -->
    <!-- 父子组件通信 -->
    <Category :scene="scene"></Category>
    <!-- 平台属性下面的页面搭建 -->
    <el-card
      shadow="always"
      :body-style="{ padding: '20px' }"
      style="margin: 20px 0"
    >
      <!-- card body -->
      <!-- 显示平台属性列表的页面 -->
      <div v-if="scene == 0">
        <el-button
          type="primary"
          size="default"
          :icon="Plus"
          @click="changeScene"
          :disabled="!categoryStore.c3Id"
          >添加属性</el-button
        >
        <el-table border style="margin: 20px 0" :data="attrData">
          <el-table-column
            label="序号"
            width="80px"
            align="center"
            type="index"
          ></el-table-column>
          <el-table-column
            label="属性名称"
            prop="attrName"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column label="属性值列表">
            <template #="{ row, $index }">
              <el-tag
                type="success"
                size="normal"
                v-for="(attrValue, index) in row.attrValueList"
                :key="attrValue.id"
                >{{ attrValue.valueName }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #="{ row, $index }">
              <el-button type="primary" size="small" :icon="Edit" @click="updateAttr(row)"></el-button>
              <el-button type="danger" size="small" :icon="Delete" @click="deleteAttr(row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 显示添加|修改平台属性的页面 -->
      <div v-else>
        <el-form :inline="true">
          <el-form-item label="属性名">
            <!-- 表单获取属性名 通过v-model双向绑定 -->
            <el-input
              placeholder="请输入属性名"
              v-model="attrParams.attrName"
            ></el-input>
          </el-form-item>
        </el-form>
        <el-button
          type="primary"
          size="default"
          :icon="Plus"
          clearable
          :disabled="!attrParams.attrName"
          @click="addAttrValue"
          >添加属性值</el-button
        >
        <el-button @click="cancel">取消</el-button>
        <el-table
          border
          style="margin: 20px 0"
          :data="attrParams.attrValueList"
        >
          <el-table-column
            label="序号"
            type="index"
            align="center"
            width="80px"
          >
          </el-table-column>
          <el-table-column label="属性值名称">
            <!-- 插槽,显示结构 -->
            <template #="{ row, $index }">
              <!-- 编辑页面 -->
              <el-input
                v-if="row.flag"
                v-model="row.valueName"
                placeholder="请输入属性值"
                size="small"
                @blur="toLook(row, $index)"
                :ref="(vc) => (inputArr[$index] = vc)"
              ></el-input>
              <!-- 查看页面 -->
              <div v-else @click="toEdit(row, $index)">{{ row.valueName }}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #="{ row, $index }">
              <!-- 删除按钮 -->
              <el-button
                type="danger"
                size="small"
                :icon="Delete"
                @click="attrParams.attrValueList.splice($index, 1)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button
          type="primary"
          size="default"
          :disabled="attrParams.attrValueList.length > 0 ? false : true"
          @click="saveAttr"
          >保存</el-button
        >
        <el-button @click="cancel">取消</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
// 引入icon图标
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
  //加号
  Plus,
} from "@element-plus/icons-vue";
import { reactive, ref, watch, nextTick, onUnmounted } from "vue";
// 引入仓库
import useCategoryStore from "@/stores/category";
import { reqAddOrUpdateAttr, reqAttrList, reqDeleteAttr } from "@/api/product/attr/attr";
import { ElMessage } from "element-plus";
// 定义仓库
let categoryStore = useCategoryStore();
// 存一下服务器返回的数据=>平台属性的数据
let attrData = ref([]);
// 定义切换场景的变量
let scene = ref<number>(0);
// 定义属性值的数据
let attrParams = reactive({
  attrName: "", //属性名
  attrValueList: [], //属性值
  categoryId: "", //三级目录中的id
  categoryLevel: 3, //三级目录
});
// 定义数组ref的数据类型,用于存储之后的el-input组件的实例(即每个对象)
let inputArr = ref([]);
// 监听三级分类的id，发生变化就发请求获取平台属性的数据
watch(
  () => categoryStore.c3Id,
  () => {
    // 保证三级ID有数据才显示平台属性列表
    if (categoryStore.c3Id == "") return;
    getAttrList();
  }
);

// 获取平台属性列表的方法
const getAttrList = async () => {
  let result = await reqAttrList(
    categoryStore.c1Id,
    categoryStore.c2Id,
    categoryStore.c3Id
  );
  console.log(result);
  attrData.value = result;
};

// 点击添加属性切换到平台属性页面
const changeScene = () => {
  scene.value = 1;
  // 点击添加属性按钮清空上一次添加的数据
  Object.assign(attrParams, {
    attrName: "", //属性名
    attrValueList: [], //属性值
    categoryId: categoryStore.c3Id, //三级目录中的id,直接从仓库中拿到三级目录的id进行覆盖即可,方便之后的参数传递
    categoryLevel: 3, //三级目录
  });
};
// 点击取消切换回平台属性列表页面
const cancel = () => {
  scene.value = 0;
};

// 点击添加属性值按钮获取属性值的数据
const addAttrValue = () => {
  // 向数组中添加对象
  attrParams.attrValueList.push({
    valueName: "",
    // 给每个属性值对象都添加一个flag属性,让其能单独控制每个属性值对象,方便切换查看模式和编辑模式
    flag: true,
  });
  // 一点击添加文本框就聚焦
  nextTick(() => {
    inputArr.value[attrParams.attrValueList.length - 1].focus();
  });
};

// 失去焦点切换为查看模式
const toLook = (row, $index) => {
  // 当input框中内容为空,不允许切换为查看模式
  if (row.valueName.trim() == "") {
    // 弹出
    ElMessage({
      type: "warning",
      message: "属性值不允许为空",
    });
    // 并删除该条数据
    attrParams.attrValueList.splice($index, 1);
    // 直接返回
    return;
  }
  // 当属性值重复的时候,删除重复数据
  let repeated = attrParams.attrValueList.find((item) => {
    // 如果当前对象不等于数组的对象,即不跟自身作比较,将自身除掉
    if (row != item) {
      return row.attrName == item.attrName;
    }
  });
  // 如果repeated结果为真,即数组中有重复值
  if (repeated) {
    ElMessage({
      type: "warning",
      message: `已有属性值${attrParams.attrName},不能重复添加`,
    });
    // 并删除重复数据
    attrParams.attrValueList.splice($index, 1);
    // 直接返回
    return;
  }
  row.flag = false;
};
// 查看页面点击切换为编辑模式时
const toEdit = (row, $index) => {
  row.flag = true;
  // 切换到编辑模式时聚焦,记得使用nextTick拿到最新的DOM
  nextTick(() => {
    inputArr.value[$index].focus();
  });
};

// 点击保存按钮发请求
const saveAttr = async () => {
  // 整理数据
  attrParams.attrValueList.forEach((item) => {
    if (item.hasOwnProperty("flag")) {
      delete item.flag;
    }
  });
  try {
    // 发请求
    await reqAddOrUpdateAttr(attrParams);
    ElMessage({
      type: "success",
      message: attrParams.id ? "修改属性成功" : "添加属性成功",
    });
    // 切换场景,返回平台属性列表
    scene.value = 0;
    // 重发请求获取最新页面
    getAttrList();
  } catch (error) {
    ElMessage({
      type: "error",
      message: attrParams.id ? "修改属性失败" : "添加属性失败",
    });
  }
};

// 点击修改按钮修改属性
const updateAttr = (row)=>{
  // 切换到平台属性值页面
  scene.value = 1
  // 深拷贝数据
  Object.assign(attrParams,JSON.parse(JSON.stringify(row)))
}

// 点击删除按钮删除平台属性
const deleteAttr = async(row)=>{
  try {
    await reqDeleteAttr(row.id)
    ElMessage({
      type:'success',
      message:`删除${row.attrName}成功`,
      duration:500
    })
    getAttrList()
  } catch (error) {
    ElMessage({
      type:'error',
      message:`删除${row.attrName}失败`,
      duration:500
    })
  }
}

onUnmounted(()=>{
  // 组件销毁时,清除仓库中的数据
  categoryStore.c1Id = ''
  categoryStore.c2Id = ''
  categoryStore.c3Id = ''
  categoryStore.C1List = []
  categoryStore.C2List = []
  categoryStore.C3List = []
})
</script>

<style scoped>
</style>